{% extends "base.html" %}
{%load staticfiles%}

{% block css %}
<link rel="stylesheet" href="{% static 'bower_components/select2/dist/css/select2.min.css' %}">
<link rel="stylesheet" href="{% static 'dist/css/dataTables.bootstrap.min.css' %}">


{% endblock %}

{% block content %}
<!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      工作流管理
      <small><a href="/manage/workflow_manage">工作流配置</a></small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="/manage/workflow_manage"><i class="fa fa-dashboard"></i> 工作流管理</a></li>
    </ol>
  </section>
  <section class="content">
    <div class="row">
      <div class="col-md-12">
        <div class="box box-default">
          <button type="button" class="btn btn-success" data-toggle="modal" data-target="#workflowModal">
              新增
          </button>
          <table id="workflow_table" class="table table-striped table-bordered dataTable no-footer" >
            <thead>
              <tr>
                  <th>ID</th>
                  <th>名称</th>
                  <th>描述</th>
                  <th>工单查看权限校验</th>
                  <th>创建人</th>
                  <th>管理员</th>
                  <th>创建时间</th>
                  <th>操作</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>              
      </div>
      <div class="modal fade" id="workflowModal">
        <div class="modal-dialog" style="width: 980px;">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">工作流</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action='/api/v1.0/accounts/app_token' method="post" id='workflow_form'>
                    <div class="box-body">
                      <div class="form-group">
                        <label for="workflowName" class="col-sm-3 control-label">名称<span style="color:red">*</span></label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" id="workflowName" placeholder="请输入工作流名称" required>
                        </div>
                      </div>
                      <div class="form-group">
                          <label for="workflowDesc" class="col-sm-3 control-label">描述</label> 
                          <div class="col-sm-9">
                            <input type="text" class="form-control" id="workflowDesc" placeholder="请输入工作流描述">
                          </div>
                      </div>
                      <div class="form-group">
                          <label for="customNoticeSelect" class="col-sm-3 control-label">选择通知</label>
                          <div class="col-sm-9">
                            <select class="form-control select2" multiple="multiple" id="customNoticeSelect" data-placeholder="选择该应用有权限的工作流"
                                    style="width: 100%;">                            
                            </select>
                            <p class="help-block">如果配置通知，则当工单流转的时，loonflow将调用通知任务。<a href="/manage/notice_manage">新增通知?</a></p>
                          </div>
                      </div>
                      
                      <div class="checkbox">
                          <label for="viewPermissionCheck" class="col-sm-3 control-label">工单查看权限校验</label>
                            <div class="col-sm-9">
                              <input type="checkbox" id='viewPermissionCheck' checked>
                              <p class="help-block">开启后，以工单的关联人(创建人、曾经的处理人)的名义调用工单详情接口才可以返回详情信息</p>
                            </div>
                            
                          </label>
                      </div>

                      <div class="form-group">
                        <label for="limitExpression" class="col-sm-3 control-label" >限制表达式</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" id="limitExpression" placeholder="请输入字典对象json后格式的限制表达式" value="{}">
                          <p class="help-block">默认"{}"，限制周期({"period":24} 24小时), 限制次数({"count":1}在限制周期内只允许提交1次), 限制级别({"level":1} 针对(1单个用户 2全局)限制周期限制次数,默认特定用户);允许特定人员提交({"allow_persons":"zhangsan,lisi"}只允许张三提交工单,{"allow_depts":"1,2"}只允许部门id为1和2的用户提交工单，{"allow_roles":"1,2"}只允许角色id为1和2的用户提交工单)</p>
                        </div>
                      </div>
                      <div class="form-group">
                          <label for="displayFormStr" class="col-sm-3 control-label" >展现表单</label>
                          <div class="col-sm-9">
                            <input type="text" class="form-control" id="displayFormStr" placeholder="请输入字典对象json后格式的限制表达式" value="[]">
                            <p class="help-block">默认"[]"，用于用户只有对应工单查看权限时显示哪些字段,field_key的list的json,如["days","sn"],内置特殊字段participant_info.participant_name:当前处理人信息(部门名称、角色名称)，state.state_name:当前状态的状态名,workflow.workflow_name:工作流名称</p>
                          </div>
                        <input type="text" class="form-control" id="workflowId" style="display:none">
                    </div>
                      <div class="form-group">
                      <label for="titleTemplate" class="col-sm-3 control-label">标题模板</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="titleTemplate" value="你有一个待办工单:{title}">
                        <p class="help-block">工单字段的值可以作为参数写到模板中，格式如：你有一个待办工单:{title}</p>
                      </div>
                  </div>
                      <div class="form-group">
                        <label for="contentTemplate" class="col-sm-3 control-label">内容模板</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" id="contentTemplate" value="标题:{title}, 创建时间:{gmt_created}">
                          <p class="help-block">工单字段的值可以作为参数写到模板中，格式如：标题:{title}, 创建时间:{gmt_created}</p>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="workflowAdmin" class="col-sm-3 control-label">管理员</label>
                        <div class="col-sm-9">
                          <select class="form-control select2" multiple="multiple" id="workflowAdmin" data-placeholder="选择该工作流的管理员"
                                  style="width: 100%;">
                          </select>
                          <p class="help-block">除loonflow管理员及该工作流创建人外，该工作流的管理员也可以编辑该工作流</p>
                        </div>
                      </div>
                    <!-- /.box-body -->
                      <div class="box-footer">
                        <!-- <button type="submit" class="btn btn-info pull-right">确定</button> -->
                        <input type="button" value="保存" class="btn btn-info pull-right" onclick = "submitWorkflow();" />
                      </div>
                      <!-- /.box-footer -->
                    </div>
                </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

{% endblock %}

{% block js %}
<!-- jQuery 3 -->
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<script src="{% static 'bower_components/select2/dist/js/select2.full.min.js' %}"></script>
<script src="{% static 'dist/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'dist/js/dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'dist/js/jquery.validate.js' %}"></script>
<script src="{% static 'dist/js/sweetalert.min.js' %}"></script>
<script src="{% static 'dist/js/workflow/workflow_manage.js' %}"></script>



<script>
</script>
{% endblock %}
